<template>
    <div class="order-stats">
      <div class="stats-header">
        <div class="time-select">
          <el-radio-group v-model="timeRange" size="small">
            <el-radio-button label="today">今天</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
            <el-radio-button label="year">本年</el-radio-button>
          </el-radio-group>
        </div>
      </div>
  
      <div class="stats-content">
        <div class="title">订单数量</div>
        <div class="chart-container" ref="orderCountChart"></div>
      </div>
  
      <div class="stats-content">
        <div class="title">订单金额</div>
        <div class="chart-container" ref="orderAmountChart"></div>
      </div>
  
      <div class="stats-tables">
        <div class="table-section">
          <div class="table-header">
            <h3>国家销量TOP10</h3>
            <el-radio-group v-model="countryTimeRange" size="small">
              <el-radio-button label="today">今天</el-radio-button>
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">本年</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="countryRankData" style="width: 100%">
            <el-table-column prop="name" label="产品名称" />
            <el-table-column prop="orders" label="订单数量" align="right" />
            <el-table-column prop="clicks" label="点击量" align="right" />
          </el-table>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  
  export default {
    name: 'OrderStats',
    data() {
      return {
        timeRange: 'today',
        countryTimeRange: 'month',
        orderCountChart: null,
        orderAmountChart: null,
        countryRankData: [
          { name: '美国', orders: 92, clicks: 2088 },
          { name: '日本', orders: 88, clicks: 2182 },
          { name: '加拿大', orders: 63, clicks: 1988 },
          { name: '新加坡', orders: 60, clicks: 3247 },
          { name: '韩国', orders: 55, clicks: 2133 },
          { name: '泰国', orders: 42, clicks: 1213 },
          { name: '西班牙', orders: 20, clicks: 872 },
          { name: '英国', orders: 13, clicks: 288 },
          { name: '马来西亚', orders: 6, clicks: 192 },
          { name: '巴西', orders: 2, clicks: 290 }
        ]
      }
    },
    mounted() {
      this.initOrderCountChart()
      this.initOrderAmountChart()
    },
    methods: {
      initOrderCountChart() {
        this.orderCountChart = echarts.init(this.$refs.orderCountChart)
        const option = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            padding: [8, 12]
          },
          grid: {
            top: '5%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.getTimeData(),
            axisLine: {
              lineStyle: { color: '#E5E7EB' }
            },
            axisLabel: { color: '#6B7280' }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E5E7EB'
              }
            },
            axisLabel: { color: '#6B7280' }
          },
          series: [{
            data: [40, 38, 35, 32, 30, 28, 25, 28, 32, 35, 38, 42, 45, 48, 52, 55, 58, 62, 65, 68, 72, 75, 78, 80],
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              width: 3,
              color: '#8B5CF6'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(139, 92, 246, 0.2)'
                }, {
                  offset: 1,
                  color: 'rgba(139, 92, 246, 0.02)'
                }]
              }
            }
          }]
        }
        this.orderCountChart.setOption(option)
      },
      initOrderAmountChart() {
        this.orderAmountChart = echarts.init(this.$refs.orderAmountChart)
        const option = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            padding: [8, 12]
          },
          grid: {
            top: '5%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: Array.from({length: 30}, (_, i) => i + 1),
            axisLine: {
              lineStyle: { color: '#E5E7EB' }
            },
            axisLabel: { color: '#6B7280' }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E5E7EB'
              }
            },
            axisLabel: { color: '#6B7280' }
          },
          series: [{
            data: [0.4, 0.42, 0.41, 0.39, 0.38, 0.35, 0.32, 0.3, 0.28, 0.25, 0.22, 0.2, 0.18, 0.15, 0.12, 0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              width: 3,
              color: '#8B5CF6'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(139, 92, 246, 0.2)'
                }, {
                  offset: 1,
                  color: 'rgba(139, 92, 246, 0.02)'
                }]
              }
            }
          }]
        }
        this.orderAmountChart.setOption(option)
      },
      getTimeData() {
        const times = []
        for (let i = 1; i <= 24; i++) {
          times.push(`${i.toString().padStart(2, '0')}:00`)
        }
        return times
      }
    },
    beforeDestroy() {
      this.orderCountChart && this.orderCountChart.dispose()
      this.orderAmountChart && this.orderAmountChart.dispose()
    }
  }
  </script>
  
  <style scoped>
  .order-stats {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
  }
  
  .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  
  .stats-content {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 24px;
  }
  
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 20px;
  }
  
  .chart-container {
    width: 100%;
    height: 300px;
  }
  
  .table-section {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
  }
  
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .table-header h3 {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin: 0;
  }
  
  :deep(.el-radio-button__inner) {
    background: #F3F4F6;
    border: none;
    color: #6B7280;
  }
  
  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background: #8B5CF6;
    color: white;
    box-shadow: none;
  }
  
  :deep(.el-table) {
    font-size: 14px;
  }
  
  :deep(.el-table th) {
    background: #F9FAFB;
    color: #374151;
    font-weight: 500;
  }
  
  :deep(.el-table td) {
    color: #6B7280;
  }
  </style>